<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
         <h1 id="num"></h1>
         <button onclick="getnum()">减 </button>
         <button onclick="savenum()">加 </button>
         <button onclick="ncgetnum()">异步加 </button>
    </div>
</body>
<!-- <script src="../node_modules/vue/dist/vue.js"></script> -->
<script>
    //新建仓库
    let store = {
         //state：货物
         state:{
             num:666
         },
         commit:function(lol){
             this.mutations[lol](this.state)
         },
         dispatch: function (lol) {
             this.actions[lol](this.state);
         },
         mutations:{
             getnum:function(state){
                store.state.num--
             },
             savenum:function(state){
                store.state.num++
             },
         },
         actions:{
            ncgetnum:function(state){
                setTimeout(function(){
                  store.state.num++
                  init();
              },2000) 
             }
         }
    };
    function init(){
        document.getElementById("num").innerHTML = store.state.num
    };
    function getnum(){
        // store.state.num--;
        // store.mutations.getnum();
        store.commit("getnum")
        init();
    };
     function savenum(){
        // store.state.num++;
        // store.mutations.savenum();
        store.commit("savenum")
        init();
    };
    function ncgetnum(){
        //  setTimeout(function(){
        //     store.commit("ncgetnum")
        //     init();
        //  },2000) 
        // store.commit("ncgetnum")
        // store.actions["ncgetnum"](store)
        store.dispatch("ncgetnum")
    }
    init();

    // let vm = new Vue({
    //     el:"#app",
        // data:{
        //      num:50
        // }
    // })
</script>
</html>